<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符</title>
  </head>

  <body>

  </body>
  <script>
    /* 
    spread运算符
    */
    //1.快速将数组打散
    let arr = ["adidas", "nike", "LiNing", "erke"];
    console.log(...arr); //adidas nike LiNing erke

    //2.将一个对象打散
    let obj = {
      name: "jason",
      age: 18,
      email: "jason@qq.com"
    }

    //console.log(...obj);//直接使用会报错
    //需要如下面使用
    console.log({
      id: 1,
      ...obj
    });

    //3.将一个字符串拆成多个单独的字符
    let str = "hello world";
    console.log(...str);


    //4.应用场景
    // 4.1、数组中的值作为函数参数使用
    let arr1 = [10, 20, 30];

    function func(a, b, c) {
      console.log(a, b, c)
    }

    func(...arr1); //等效于：func(10,20,30);     输出结果10 20 30

    // 4.2、合并数组
    let arr2 = [40, 50, 60];
    let newArr = [...arr1, ...arr2]; // 等效于 [ 10, 20, 30, 40, 50, 60 ]
    console.log(newArr); //[ 10, 20, 30, 40, 50, 60 ]

    // 4.3、合并对象
    let obj1 = {
      name: "luowowo",
      age: "11",
    };
    let obj2 = {
      email: "luowowo@163.com",
    };
    let newObj = {
      ...obj1,
      ...obj2
    }; // 等效于{ name: 'luowowo', age: '11', email: 'luowowo@163.com' }
    console.log(newObj); //{ name: 'luowowo', age: '11', email: 'luowowo@163.com' }

    // 4.4、es6中另一个合并对象的方法
    let newObj2 = Object.assign({}, obj1, obj2); // 把第二个及第二个以上的参数都合并到第1个上面去。
    console.log(newObj2); //{ name: 'luowowo', age: '11', email: 'luowowo@163.com' }


    //5.三点运算符在解构赋值中的使用
    //5.1 解构数组
    let [a, b, ...newArr1] = [1, 2, 3, 4, 5];
    console.log(a, b, newArr1); //1 2 [3,4,5]

    //5.2解构字符串
    let [aa, bb, ...newStr2] = "hello";
    console.log(aa, bb, newStr2); //h e [l,l,o]
  </script>

</html>